<template>
    <div class="custom-timeline">
        <div v-for="(activity, index) in reversedActivities" :key="index" class="custom-timeline-item">
            <div class="timeline-node" :class="{ 'timeline-node-end': activity.status == 'end' }">
                <div class="timeline_node_img_div" >
                    <img :src="activity.imgPath" :alt="activity.content"> 
                </div>
            </div>
            <div class="timeline-content" >
                <p>{{ activity.content }}</p>
                <span class="timestamp">{{ activity.timestamp }}</span>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            activities: [
                {
                    content: '订单已提交，等待付款',
                    timestamp: '2022-04-13 12:00:00',
                    imgPath: require('../../../assets/order/钱.png'), // 注意文件名应该不包含特殊字符 
                    status: 'start',
                    
                },
                {
                    content: '到达目的地网点广东深圳公司，快件将很快进行派送',
                    timestamp: '2022-04-13 12:00:00',
                    imgPath: require('../../../assets/order/运输.png'), // 注意文件名应该不包含特殊字符 
                    status: 'middle'
                },
                {
                    content: '订单已签收',
                    timestamp: '2022-04-13 12:00:00',
                    imgPath: require('../../../assets/order/白字收.png'), // 注意文件名应该不包含特殊字符 
                    status: 'end'
                },
                // ...其他活动  
            ],
        };
    },
    computed: {  
        reversedActivities() {  
            // 返回倒序后的数组  
            return this.activities.slice().reverse();  
        },  
    }, 
    mounted() {  
        this.$nextTick(() => {  
      this.calculateTimelineHeight();  
    }); 
    },  
    methods: {  
    calculateTimelineHeight() {  
      let totalHeight = 0;  
      const timelineItems = this.$el.querySelectorAll('.custom-timeline-item');  
  
      timelineItems.forEach(item => {  
        totalHeight += item.offsetHeight;  
  
        // 加上每个项目之间的间距（如果需要的话）  
        // totalHeight += someSpacingValue;  
      });  
      totalHeight -= 40;
  
      // 设置自定义属性的值，这样我们就可以在 CSS 中使用它  
      this.$el.style.setProperty('--timeline-height', `${totalHeight}px`);  
  
      // 或者，如果你不想使用 CSS 变量，可以直接设置 ::before 伪元素的样式  
      // 但是请注意，这通常不可行，因为伪元素不是 DOM 元素  
      // 所以这里我们采用 CSS 变量的方法  
    }  
  }   
};
</script>
<style >
.custom-timeline {
    position: relative;
}
.custom-timeline::before {  
    content: '';  
    position: absolute;  
    left: 10px; /* 竖线位置 */  
    top: 0;  
    bottom: 0;  
    width: 1px; /* 虚线宽度 */  
    border-right: 1px dashed rgba(167, 180, 204, 1);
    height: var(--timeline-height);  
}
.custom-timeline-item {
    position: relative;
    padding-bottom: 20px;
}
.timeline_node_img_div img {  
    /* 使图片完全填充div */  
    width: 100%;  
    height: 100%;  
    object-fit: cover; /* 确保图片在保持其宽高比的同时填充整个div */  

}
.timeline-node {
    position: absolute;
    left: 2px;
    /* 节点中心与竖线对齐 */
    top: 0;
    width: 18px;
    /* 节点宽度 */
    height: 18px;
    background: rgba(191, 202, 222, 1);
    border-radius: 10px;
    /* ... 其他样式保持不变 ... */
}

.timeline-node-end {  
    background: rgba(255, 87, 51, 1); 
}

.timeline_node_img_div {
    position: absolute;
    left: 3px;
    /* 节点中心与竖线对齐 */
    /* top: 0.5px; */
    /* bottom: 2px; */
    width: 12px;
    height: 10.5px;
    /* background: url("../../../assets/order/订单.png"); */
    /* background-size: cover; */
}
.timeline-content {
    margin-left: 40px;
    /* 节点宽度 + 额外间距 */
    font-size: 12px;
    color: rgba(52, 69, 99, 1);
    /* ... 其他样式保持不变 ... */
}
.timestamp {
    color: rgba(167, 180, 204, 1);
}
</style>